// 导入React组件
import React from 'react';
// 引入路由的组件
import { BrowserRouter, useRoutes } from 'react-router-dom';
// 获取所有的页面路由
import routes from '~react-pages';
// 引入路由规则
import rules from '@/routers/rules';

import type business from './typeof/type';

const App = () => {
    // 路由规则
    const Routers = () => {
        // 从useLocation()钩子中解构出pathname,表示当前URL的路径部分
        const { pathname } = useLocation();
        // 设置跳转功能
        const navigate = useNavigate();
        // 跳转功能在全局中使用
        React.navigate = navigate;

        useEffect(() => {
            const check = async () => {
                // 获取登录信息
                const business = React.Cookies.load('business') ? React.Cookies.load('business') : {};
                // 判断是否登录 使用 Object.getOwnPropertyNames 获取属性名,并检查它的长度
                if (Object.getOwnPropertyNames(business).length === 0) {
                    // 如果没有登录,跳转到登录页面
                    React.fail('请先登录', () => {
                        navigate('/business/login');
                    });

                    return false;
                }

                // 获取用户id
                const id = business.id ?? 0;
                // 获取用户mobile
                const mobile = business.mobile ?? 0;
                // 发送请求
                const result = await React.Http.post('/business/check', { id, mobile });
                // 处理请求结果
                if (result.code === 1) {
                    // 保存登录数据在Cookie中
                    React.Cookies.save('business', result.data, { path: '/' });
                    // 在全局global.ts中定义React对象
                    React.business = result.data as business;
                } else {
                    // 处理登录失败
                    React.fail(result.msg, () => {
                        // 清除登录数据
                        React.Cookies.remove('business', { path: '/' });
                        // 在全局global.ts中定义React对象
                        React.business = {} as business;
                        // 跳转到登录页面
                        navigate('/business/login');
                    })
                }
            }
            // 返回true，表示已经登录
            if (!rules.includes(pathname)) check();
        }, [pathname, navigate]);
        // 返回一个React元素，其中包含一个Suspense组件
        // Suspense组件允许React在组件尚未加载完成时显示一个加载指示器
        return (
            <React.Suspense>
                {useRoutes(routes)}
            </React.Suspense>
        )
    }
    // App组件返回一个React元素，其中包含一个BrowserRouter组件
    // BrowserRouter组件使得应用能够处理浏览器中的路由变化
    return (
        <BrowserRouter>
            <Routers />
        </BrowserRouter>
    )
}

// 导出App组件
export default App;